<template>
  <div class="app-container">
    <box-card class="header-info">
      <div class="info-left">
        <div class="p1"><label>{{ detail.realName }}</label> <el-link type="warning">TA可能在{{ detail.workCompanyQty || 0
            }}家企业中有相关任职经历>></el-link></div>
        <div class="p2">
          <div>
            <svg-icon v-if="!!detail.sex" icon-class="icon-female"></svg-icon>
            <span class="text">{{ detail.sex || '性别：未知' }}</span>
          </div>
          <div>
            <svg-icon icon-class="icon-map"></svg-icon>
            <span class="text">{{ detail.registeredAreaName || '未知' }}</span>
          </div>
        </div>
        <div class="p3">
          执业单位：<el-link type="primary" :href="detail.practiceCompanyMohurdUrl" target="_blank">{{ detail.practiceCompany }}</el-link>
          <span class="ml20">项目人员职位：</span>{{ detail.jobTitle || '未知' }}
        </div>
      </div>
      <div class="info-right">
        <span class="phone">{{ detail.mobile }}</span>
        <el-button plain @click="handleDrawDown">
          <template #icon>
            <svg-icon icon-class="icon-phone"></svg-icon>
          </template>
          领取联系方式
        </el-button>
      </div>
    </box-card>

    <box-card class="box-info mt24" v-if="!!detail.id">
      <div class="tab-bar">
        <a v-for="(item, index) in tabList" :key="index" class="tab-item"
          :class="{ 'tab-active': tabActive === item.value }" :href="`#${item.id}`" @click="handleTab(item.value)">
          <span>{{ item.label }}({{ item.value === 0 ? eCount : rCount }})</span>
        </a>
      </div>
      <!-- <el-anchor :offset="70" direction="horizontal">
        <el-anchor-link class="anchor-link" href="#projects">
          参与的项目({{ eCount }})
        </el-anchor-link>
        <el-anchor-link class="anchor-link" href="#regInfo">
          执业注册信息({{ rCount }})
        </el-anchor-link>
      </el-anchor> -->
      <projects :personalId="detail.id" :total="eCount" />
      <regInfo :personalId="detail.id" :total="rCount" />
      <!-- <el-tabs v-model="activeTab">
        <el-tab-pane :label="`参与的项目(${eCount})`" name="projects">
          <projects :personalId="detail.id" :total="eCount" />
        </el-tab-pane>
        <el-tab-pane :label="`执业注册信息(${rCount})`" name="regInfo">
          <regInfo :personalId="detail.id" :total="rCount" />
        </el-tab-pane>
      </el-tabs> -->
    </box-card>
  </div>
</template>

<script setup>
import { ElMessageBox } from "element-plus"
import {
  getPersonnelInfo, getClaimContact,
  engineerCount, registeredCount
} from '@/api/personnel'
import projects from "./components/projects"
import regInfo from "./components/regInfo"
const route = useRoute()
// console.log('detail route:', route.query)
const activeTab = ref("projects")
const detail = ref({})
const loading = ref(false)
const eCount = ref(0)
const rCount = ref(0)
const tabActive = ref(0)
const tabList = ref([{
  id: 'projects',
  label: '参与的项目',
  value: 0,
}, {
  id: 'regInfo',
  label: '执业注册信息',
  value: 1,
}])

function getInfo() {
  loading.value = true
  getPersonnelInfo({ id: route.query.id }).then(res => {
    loading.value = false
    if (res.code === 200) {
      detail.value = res.data
      fetchEngineerCount()
      fetchRegisteredCount()
    }
  })
}

function fetchEngineerCount() {
  engineerCount(detail.value.id).then(res => {
    eCount.value = res.data
  })
}

function fetchRegisteredCount() {
  registeredCount(detail.value.id).then(res => {
    rCount.value = res.data
  })
}
// 领取电话
function handleDrawDown() {
  getClaimContact(detail.value.id).then(res => {
    ElMessageBox.alert(res.data, "系统提示", {
      dangerouslyUseHTMLString: true,
      type: "success",
    }).then(() => {
      getList()
    }).catch(() => { })
  })
}

function handleTab(index) {
  tabActive.value = index
}

// function handleScrollChange() {
//   // 获取第一个锚点链接的实例
//   const firstAnchor = section1
//   if (firstAnchor && firstAnchor.active) {
//     // 如果第一个锚点链接在可视区域内，并且滚动到顶部，则聚焦第一个锚点链接
//     firstAnchor.handleScrollIntoView()
//   }
// }

getInfo()
</script>

<style lang="scss" scoped>
.tab-bar {
  border-bottom: 4px solid #d8d8d8;
  display: flex;
  margin-bottom: 55px;

  .tab-item {
    border-bottom: 4px solid transparent;
    color: #333333;
    cursor: pointer;
    font-size: 18px;
    height: 36px;
    padding-bottom: 10px;
    text-align: center;
    position: relative;
    bottom: -4px;
    margin-right: 40px;

    span {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .tab-active {
    border-bottom-color: #aa261d;
    color: #aa261d;
    font-weight: 500;
  }
}

.header-info {
  :deep(.box-card-body) {
    display: flex;
    align-items: flex-start;
  }

  .info-left {
    flex: 1;
  }

  .info-right {
    display: flex;
    align-items: center;

    .phone {
      color: rgba(204, 57, 47, 1);
      font-size: 17px;
      font-weight: 700;
      margin-right: 10px;
    }
  }

  .p1 {
    color: #222222;
    font-size: 14px;
    display: flex;
    align-items: center;

    .link {
      color: #FF8D1A;
    }

    label {
      font-size: 17px;
      font-weight: 700;
      margin-right: 10px;
    }
  }

  .p2 {
    display: flex;
    margin-top: 10px;

    >div {
      display: flex;
      align-items: center;
      margin-right: 15px;
    }

    .svg-icon {
      margin-right: 5px;
    }

    .text {
      font-size: 14px;
    }
  }

  .p3 {
    color: #222222;
    font-size: 14px;
    margin-top: 10px;

    .link {
      color: #2A82E4;
    }

    span {
      color: #646566;
    }
  }
}

.el-tabs {
  :deep(.el-tabs__item) {
    align-items: flex-start;
    font-size: 18px;
    font-weight: 400;

    &.is-active {
      color: #333333;
      font-weight: 700;
    }
  }
}
</style>